<template>
    <!-- <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
        open
    </el-button> -->
    <el-avatar shape="square" :size="100"  :src="props.modelValue" @click="drawer = true">
        <img src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" alt="">
    
    </el-avatar>
    <!--抽屉-->
    <el-drawer v-model="drawer" title="我的图库" direction="ttb" size="48%">

        <el-upload v-model:file-list="fileList" list-type="picture-card" :auto-upload="false" :on-change="onChange">
            <el-icon>
                <Plus />
            </el-icon>

            <template #file="{ file }">
                <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" 
                        @click="getImgUrl(file)">
                            <el-icon><zoom-in /></el-icon>
                        </span>
                    </span>
                </div>
            </template>
        </el-upload>
    </el-drawer>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import{uploadApi} from "@/api"
const drawer = ref(false)
//const imgurl=ref()
//const dialogVisible = ref(false)


const fileList = ref([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
])

//单向数据流 父---子传递数据
const props = defineProps({
    modelValue: {
        type: String,
        default:''
    }
})

//绑定一个通知  提前通知父类我要改变什么内容了
const emit = defineEmits(['update:modelValue'])

const onChange = (uploadFile: any, uploadFiles: any) => {
    console.log("uploadFile=", uploadFiles);
    let name = uploadFile.name
    let file = uploadFile.raw
    //console.log(file);
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
        //console.log(reader.result);
        callUploadApi(name, reader.result)
    }

}
//点击图片给头像赋值
const getImgUrl = (file: any) => {
   // console.log(file);
    //给头像赋值
    // imgurl.value = file.url!

    emit('update:modelValue', file.url!)
    drawer.value = false
}

const callUploadApi = (name:any,base64:any) => { 

    uploadApi.upload.call({name:name,base64:base64}).then((res:any) => { 
         console.log(res);
        
    })

}
onMounted(() => { 
    CallimgList()
})

const CallimgList = () => { 
    uploadApi.getimg.call().then((res: any) => { 

       // console.log(res);
        fileList.value=res
    })
}



</script>